<!-- <!DOCTYPE html>
<html lang="en">
	<head>
		  
		<meta charset="UTF-8">
		  
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		  <title>Speech Grammar Example</title>
	</head>
	<body>
		  <button id="startButton">Start Speech Recognition</button>
		  <div id="output"></div>

		  <script>
			// 确保浏览器支持 SpeechRecognition
			const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;


			if ('SpeechRecognition' in window) {
				console.log('浏览器支持语音识别');
			} else {
				console.log('浏览器不支持语音识别');
			}

			if (!SpeechRecognition) {
				console.error("SpeechRecognition not supported");
			} else {
				// 创建 SpeechRecognition 实例
				const recognition = new SpeechRecognition();
				console.log(recognition);
				// 定义语法规则
				const grammar = '#JSGF V1.0; grammar colors; public <color> = red | green | blue | yellow ;';

				// 创建 webkitSpeechGrammarList 实例
				const speechGrammarList = new webkitSpeechGrammarList();
				speechGrammarList.addFromString(grammar, 1); // 1 是语法的优先级

				// 将语法列表应用到 SpeechRecognition 实例
				recognition.grammars = speechGrammarList;

				// 配置识别选项
				recognition.lang = 'en-US'; // 设置语言
				recognition.interimResults = false; // 只返回最终结果
				recognition.maxAlternatives = 1; // 只返回一个替代结果

				// 开始识别
				recognition.start();

				recognition.onresult = (event) => {
					const result = event.results[0][0].transcript;
					console.log('识别结果:', result);
				};

				recognition.onerror = (event) => {
					console.error('识别错误:', event.error);
				};
			}
		</script>
	</body>

</html> -->

<!-- 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>语音识别示例</title>
	</head>
	<body>
		<button id="start-btn">开始语音识别</button>
		<button id="stop-btn">停止语音识别</button>
		<div id="result"></div>
		<script>
			var recognition;
			var startButton = document.getElementById('start-btn');
			var stopButton = document.getElementById('stop-btn');
			var resultDiv = document.getElementById('result');
			startButton.addEventListener('click', function() {
				if ('SpeechRecognition' in window) {
					recognition = new SpeechRecognition();
					recognition.lang = 'en-US';
					recognition.interimResults = false;
					recognition.maxAlternatives = 1;
					recognition.onresult = function(event) {
						var transcript = event.results[0][0].transcript;
						resultDiv.textContent = '识别到的文本: ' + transcript;
					};
					recognition.onerror = function(event) {
						console.error('语音识别错误:', event.error);
					};
					recognition.start();
				} else {
					alert('浏览器不支持语音识别');
				}
			});
			stopButton.addEventListener('click', function() {
				if (recognition) {
					recognition.stop();
				}
			});
		</script>
	</body>
</html> -->




<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>语音识别示例</title>
	</head>
	<body>
		<button onclick="startRecognition()">开始识别</button>
		<button onclick="stopRecognition()">停止识别</button>
		<div id="output"></div>
		<script>
			const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
			recognition.lang = 'zh-CN';
			recognition.continuous = true;
			recognition.interimResults = false;
			recognition.onstart = function() {
				console.log('语音识别开始');
			};
			recognition.onresult = function(event) {
				let finalTranscript = '';
				for (let i = event.resultIndex; i < event.results.length; ++i) {
					if (event.results[i].isFinal) {
						finalTranscript += event.results[i][0].transcript;
					}
				}
				document.getElementById('output').innerText = finalTranscript;
			};
			recognition.onerror = function(event) {
				console.error('语音识别错误：', event.error);

				if (event.error == 'network') {
					console.error('语音识别错误：网络问题');
					alert('无法连接到语音识别服务，请检查网络连接！');
				} else {
					console.error('语音识别错误：', event.error);
				}
			};
			recognition.onend = function() {
				console.log('语音识别结束');
			};

			function startRecognition() {
				recognition.start();
			}

			function stopRecognition() {
				recognition.stop();
			}
		</script>
	</body>
</html>